<template>
    <div class="tree" v-for="item in data">
        <input type="checkbox" :value="item.checked"><span>{{ item.name }}</span>
        <!-- 解释 -->
        <Tree v-if="item?.children?.length" :data="item?.children"></Tree>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
interface Tree {
    name: string;
    checked: boolean;
    children?: Tree[];
}
defineProps<{
    data: Tree[];
}>()
</script>

<style scoped>
.tree {
    margin-left: 10px;
}
</style>